<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/screen.css" type="text/css"
	media="screen" title="default" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
<![endif]-->

<!--  jquery core -->
<script src="../js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

<!--  checkbox styling script -->
<script src="../js/jquery/ui.core.js" type="text/javascript"></script>
<script src="../js/jquery/ui.checkbox.js" type="text/javascript"></script>
<script src="../js/jquery/jquery.bind.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('input').checkBox();
		$('#toggle-all').click(function() {
			$('#toggle-all').toggleClass('toggle-checked');
			$('#mainform input[type=checkbox]').checkBox('toggle');
			return false;
		});
	});
</script>

<!--[if !IE 7]-->

<!--  styled select box script version 1 -->
<script src="../js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect').selectbox({
			inputClass : "selectbox_styled"
		});
	});
</script>


<!--[endif]-->

<!--  styled select box script version 2 -->
<script src="../js/jquery/jquery.selectbox-0.5_style_2.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect_form_1').selectbox({
			inputClass : "styledselect_form_1"
		});
		$('.styledselect_form_2').selectbox({
			inputClass : "styledselect_form_2"
		});
	});
</script>

<!--  styled select box script version 3 -->
<script src="../js/jquery/jquery.selectbox-0.5_style_2.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect_pages').selectbox({
			inputClass : "styledselect_pages"
		});
	});
</script>

<!--  styled file upload script -->
<script src="../js/jquery/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(function() {
		$("input.file_1").filestyle({
			image : "images/forms/choose-file.gif",
			imageheight : 21,
			imagewidth : 78,
			width : 310
		});
	});
</script>

<!-- Custom jquery scripts -->
<script src="../js/jquery/custom_jquery.js" type="text/javascript"></script>

<!-- Tooltips -->
<script src="../js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="../js/jquery/jquery.dimensions.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('a.info-tooltip ').tooltip({
			track : true,
			delay : 0,
			fixPNG : true,
			showURL : false,
			showBody : " - ",
			top : -35,
			left : 5
		});
	});
</script>


<!--  date picker script -->
<link rel="stylesheet" href="../css/datePicker.css" type="text/css" />
<script src="../js/jquery/date.js" type="text/javascript"></script>
<script src="../js/jquery/jquery.datePicker.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(function() {

		// initialise the "Select date" link
		$('#date-pick').datePicker(
		// associate the link with a date picker
		{
			createButton : false,
			startDate : '01/01/2005',
			endDate : '31/12/2020'
		}).bind(
		// when the link is clicked display the date picker
		'click', function() {
			updateSelects($(this).dpGetSelected()[0]);
			$(this).dpDisplay();
			return false;
		}).bind(
		// when a date is selected update the SELECTs
		'dateSelected', function(e, selectedDate, $td, state) {
			updateSelects(selectedDate);
		}).bind('dpClosed', function(e, selected) {
			updateSelects(selected[0]);
		});

		var updateSelects = function(selectedDate) {
			var selectedDate = new Date(selectedDate);
			$('#d option[value=' + selectedDate.getDate() + ']').attr(
					'selected', 'selected');
			$('#m option[value=' + (selectedDate.getMonth() + 1) + ']').attr(
					'selected', 'selected');
			$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr(
					'selected', 'selected');
		}
		// listen for when the selects are changed and update the picker
		$('#d, #m, #y').bind('change', function() {
			var d = new Date($('#y').val(), $('#m').val() - 1, $('#d').val());
			$('#date-pick').dpSetSelected(d.asString());
		});

		// default the position of the selects to today
		var today = new Date();
		updateSelects(today.getTime());

		// and update the datePicker to reflect it...
		$('#d').trigger('change');
	});
</script>

<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="../js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).pngFix();
	});
</script>
</head>
<body>
	<!-- Start: page-top -->
	<div id="page-top">
		<div class="clear"></div>

	</div>
	<!-- End: page-top -->

	<div class="clear">&nbsp;</div>
	<!--  start nav-outer -->
	<div class="nav-outer"></div>
	<div class="clear"></div>
	<!--  start nav-outer -->

	<div class="clear"></div>

	<!-- start content-outer ........................................................................................................................START -->
	<div id="content-outer">
		<!-- start content -->
		<div id="content">

			<!--  start page-heading -->
			<div id="page-heading">
				<div>
					<h3>Search Contact</h3>
				</div>
				<div class="searchLookup">
					<table>
						<tr>
							<td style="">First Name :</td>
							<td style=""><input type="text" name="businessType" size="50px" /></td>
							<td style="padding-left: 150px;">Surname :</td>
							<td ><input type="text" name="sicCode" size="50px"/></td>						
					</table>
				</div>
				<div class="searchLookupButton">
					<form action="" method="post">
						<table>
							<tr>
								<td><input type="submit" name="searchContact"
									value="Search Contact" /></td>
								<td><input type="submit" name="none" value="None" /></td>
								<td><input type="submit" name="clear" value="Clear" /></td>
							</tr>
						</table>
					</form>
				</div>
				<div>
					<form action="" method="post">
						<table>
							<tr>
								<td><input type="checkbox" name="inActive"/></td>
								<td style="padding-left: 10px;">Include in-active Contact ?</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
			<!-- end page-heading -->

			<table border="0" width="100%" cellpadding="0" cellspacing="0"
				id="content-table">
				<tr>
					<th rowspan="3" class="sized"><img
						src="../images/shared/side_shadowleft.jpg" width="20" height="300"
						alt="" /></th>
					<th class="topleft"></th>
					<td id="tbl-border-top">&nbsp;</td>
					<th class="topright"></th>
					<th rowspan="3" class="sized"><img
						src="../images/shared/side_shadowright.jpg" width="20" height="300"
						alt="" /></th>
				</tr>
				<tr>
					<td id="tbl-border-left"></td>
					<td>
						<!--  start content-table-inner ...................................................................... START -->
						<div id="content-table-inner">

							<!--  start table-content  -->
							<div id="table-content">

								<!--  start message-yellow -->

								<!--  end message-green -->


								<!--  start product-table ..................................................................................... -->
								<form id="mainform" action="">
									<table border="0" width="100%" cellpadding="0" cellspacing="0"
										id="product-table">
										<tr>
											<th class="table-header-check"><a id="toggle-all"></a></th>
											<th class="table-header-repeat line-left minwidth-1" width="250px"  ><a
												href="">Contact Name</a></th>
											<th class="table-header-repeat line-left minwidth-1"><a
												href="">Mobile Phone</a></th>
											<th class="table-header-repeat line-left minwidth-1" width="250px"><a
												href="">Email</a></th>
											<th class="table-header-repeat line-left minwidth-1"><a
												href="">Contact Type</a></th>
											<th class="table-header-repeat line-left minwidth-1" width="20px"><a
												href="">Is Active?</a></th>	
											<th class="table-header-repeat line-left" width="100px"><a href="">   </a></th>
											
										</tr>
										<tr>
											<td><input type="checkbox" /></td>
											<td>Nguyen The Vinh</td>
											<td>0912345678</td>
											<td>thevinh92@gmail.com</td>
											<td>Operational</td>
											<td>Yes</td>
											<td></td>
											
										</tr>
										<tr>
											<td><input type="checkbox" /></td>
											<td>Nguyen The Vinh</td>
											<td>0912345678</td>
											<td>thevinh92@gmail.com</td>
											<td>Operational</td>
											<td>Yes</td>
											<td></td>
											
										</tr>
										<tr>
											<td><input type="checkbox" /></td>
											<td>Nguyen The Vinh</td>
											<td>0912345678</td>
											<td>thevinh92@gmail.com</td>
											<td>Operational</td>
											<td>Yes</td>
											<td></td>
											
										</tr>
										<tr>
											<td><input type="checkbox" /></td>
											<td>Nguyen The Vinh</td>
											<td>0912345678</td>
											<td>thevinh92@gmail.com</td>
											<td>Operational</td>
											<td>Yes</td>
											<td></td>
											
										</tr>
										
										
									</table>
									<!--  end product-table................................... -->
								</form>
							</div>
							<!--  end content-table  -->
							<!--  start paging..................................................... -->
							<table border="0" cellpadding="0" cellspacing="0"
								id="paging-table">
								<tr>
									<td><a href="" class="page-far-left"></a> <a href=""
										class="page-left"></a>
										<div id="page-info">
											Page <strong>1</strong> / 15
										</div> <a href="" class="page-right"></a> <a href=""
										class="page-far-right"></a></td>
								</tr>
							</table>
							<!--  end paging................ -->

							<div class="clear"></div>
							<form action="" method="post">
								<table>
									<tr>
										<td width="40px"><input type="submit" name="select"
											value="Select" style=" width: 100px;"/></td>
										<td style="padding-left: 20px;"><input type="submit" name="close" value="Close" style=" width: 80px;" /></td>
									</tr>
								</table>
							</form>
						</div> <!--  end content-table-inner ............................................END  -->
					</td>
					<td id="tbl-border-right"></td>
				</tr>
				<tr>
					<th class="sized bottomleft"></th>
					<td id="tbl-border-bottom">&nbsp;</td>
					<th class="sized bottomright"></th>
				</tr>
			</table>
			<div class="clear">&nbsp;</div>
		</div>
		<!--  end content -->
		<div class="clear">&nbsp;</div>
	</div>
	<!--  end content-outer........................................................END -->

	<div class="clear">&nbsp;</div>

	<!-- start footer -->
	<div id="footer">

	
	</div>
	<!-- end footer -->
</body>
</html>